
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Using the Dashboard · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="../../api/" />
    
    
    <link rel="prev" href="../Migration.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    What is ThingsJS?
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1.1" data-path="../../about/Architecture.html">
            
                <a href="../../about/Architecture.html">
            
                    
                    System Architecture
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.1.2" data-path="../../about/Terminology.html">
            
                <a href="../../about/Terminology.html">
            
                    
                    Terminology
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.1.3" data-path="../../api/CLI.html">
            
                <a href="../../api/CLI.html">
            
                    
                    CLI Commands
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.1.4" data-path="../../Publications.html">
            
                <a href="../../Publications.html">
            
                    
                    Publications
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../../GettingStarted.html">
            
                <a href="../../GettingStarted.html">
            
                    
                    Getting Started
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../VirtualMachine.html">
            
                <a href="../VirtualMachine.html">
            
                    
                    ThingsJS VM Image
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../Setup-PocketBeagle.html">
            
                <a href="../Setup-PocketBeagle.html">
            
                    
                    Pocket Beagle
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../Setup-BeagleboneBlack.html">
            
                <a href="../Setup-BeagleboneBlack.html">
            
                    
                    Beaglebone Black
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../../samples/">
            
                <a href="../../samples/">
            
                    
                    Sample Components
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../../samples/RIoTBenchmarks.html">
            
                <a href="../../samples/RIoTBenchmarks.html">
            
                    
                    Sample Benchmarks
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../">
            
                <a href="../">
            
                    
                    Tutorials
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../FirstApplication.html">
            
                <a href="../FirstApplication.html">
            
                    
                    Writing your First App
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../Migration.html">
            
                <a href="../Migration.html">
            
                    
                    Live-Migration
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.3" data-path="Dashboard.html">
            
                <a href="Dashboard.html">
            
                    
                    Using the Dashboard
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../../api/">
            
                <a href="../../api/">
            
                    
                    Developer API
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../../api/Devdocs.html">
            
                <a href="../../api/Devdocs.html">
            
                    
                    Developer Documentation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../../api/Testing.html">
            
                <a href="../../api/Testing.html">
            
                    
                    Running Unit Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../../api/Pubsub.html">
            
                <a href="../../api/Pubsub.html">
            
                    
                    Pubsub
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../../api/Code.html">
            
                <a href="../../api/Code.html">
            
                    
                    Code
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../../api/CodeEngine.html">
            
                <a href="../../api/CodeEngine.html">
            
                    
                    CodeEngine
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" data-path="../../api/Dispatcher.html">
            
                <a href="../../api/Dispatcher.html">
            
                    
                    Dispatcher
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.7" data-path="../../api/Scheduler.html">
            
                <a href="../../api/Scheduler.html">
            
                    
                    Scheduler
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.8" data-path="../../api/GFS.html">
            
                <a href="../../api/GFS.html">
            
                    
                    File system
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.9" data-path="../../api/Dashboard.html">
            
                <a href="../../api/Dashboard.html">
            
                    
                    Web Dashboard
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../../Community/">
            
                <a href="../../Community/">
            
                    
                    Community
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../../Community/involve.html">
            
                <a href="../../Community/involve.html">
            
                    
                    Get involved
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../../Community/contribute.html">
            
                <a href="../../Community/contribute.html">
            
                    
                    Contribute
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../../Community/feedback.html">
            
                <a href="../../Community/feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../../Community/team.html">
            
                <a href="../../Community/team.html">
            
                    
                    Team
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >Using the Dashboard</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h2 id="a-guide-to-using-the-dashboard">A Guide to Using the Dashboard</h2>
<h3 id="i-navigating-the-dashboard">I. Navigating the Dashboard</h3>
<p>The navigation bar is located to the left of every page. Clicking on any link from the navigation bar will redirect you to a new view.</p>
<blockquote>
<p><img src="img/navbar.png" alt="nav-bar"></p>
<p><em>Figure 1: Navigation bar</em></p>
</blockquote>
<p>Currently, users can navigate to the following views:</p>
<ol>
<li><a href="#home">Home</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#applications">Applications</a></li>
<li><a href="#files">Files</a></li>
</ol>
<h3 id="ii-dashboard-views">II. Dashboard Views</h3>
<h4 id="1-home"><a id="home"></a>1. Home</h4>
<blockquote>
<p>The <code>Home view</code> provides a comprehensive summary about live devices ( running <code>code engine</code> instances) on the network, along with the programs these devices may be executing.</p>
</blockquote>
<h5 id="11-list-of-devices">1.1 List of Devices</h5>
<p>Available devices can be seen from the <code>Devices</code> panel, along with the device&apos;s status (one of <code>idle</code>, <code>busy</code>, or <code>dead</code>).</p>
<blockquote>
<p><img src="img/devicelist.png" alt="list of devices"></p>
<p><em>Figure 2: List of devices</em></p>
</blockquote>
<h5 id="12-device-details">1.2 Device Details</h5>
<p>Clicking on a specific device will give users the option to view details about the device on the bottom or top pane located to the right of the page.</p>
<blockquote>
<p><img src="img/device-selection.png" alt="select device"></p>
<p><em>Figure 3: Selecting a device to view further details</em></p>
</blockquote>
<p>Details include what programs the device is running, any device outputs to <code>console</code>, graphs of the device&apos;s resource usage, and general information about the device such as the device type and device <code>id</code>. </p>
<blockquote>
<p><img src="img/device-details.png" alt="Detail pane"></p>
<p><em>Figure 4: Detailed device pane</em></p>
</blockquote>
<h6 id="121-running-code-on-a-device">1.2.1 Running Code on a Device</h6>
<p>To run code directly on a device, have the device selected in the <code>detailed device pane</code>. Then, select the code you want to execute on the device before clicking <code>run</code>. You may only select code from the <code>\codes</code> directory at this time.</p>
<blockquote>
<p><img src="img/code-selection.png" alt="run code"></p>
<p><em>Figure 5: Running code on a device</em></p>
</blockquote>
<p>Once the code successfully launches on the device, you can <img src="img/kill-button.png" alt="kill"> <code>kill</code>, <img src="img/pause-button.png" alt="pause"> <code>pause</code>, or <img src="img/migration-button.png" alt="migrate"> <code>migrate</code> the process.</p>
<blockquote>
<p><img src="img/program-options.png" alt="program options"></p>
<p><em>Figure 6: Additional options for running programs</em></p>
</blockquote>
<h4 id="2-schedule"><a id="schedule"></a>2. Schedule</h4>
<blockquote>
<p>The <code>Schedule view</code> provides a time-based overview of events in the system. It also allows users to control application instances, as well as launch new ones. </p>
<p><strong>Note</strong>: This view assumes there is a running <code>Scheduler</code> instance on the network. Otherwise, some parts of this view will be missing.</p>
</blockquote>
<h5 id="21-the-time-based-events-graph">2.1 The Time-Based Events Graph</h5>
<p>The graph shown on the page provides users a timeline of events that have occurred in the system. Red bars indicate when the <code>Scheduler</code> has been invoked. 
Users can minimize or maximize the graph, click on a specific point in time, or navigate forwards and backwards in time.</p>
<blockquote>
<p><img src="img/schedule-graph.png" alt="schedule graph"></p>
<p><em>Figure 7: A graph of events in the system</em></p>
</blockquote>
<h5 id="22-type-of-events">2.2 Type of Events</h5>
<p>The events displayed on the graph can be further broken down into separate categories: <code>Scheduler</code>, <code>Engines</code>, and <code>Programs</code>. </p>
<p>To see the phases of the scheduler, select the <code>Scheduler</code> tab</p>
<blockquote>
<p><img src="img/scheduler-tab.png" alt="scheduler event"></p>
<p><em>Figure 8a: Scheduling phases</em></p>
</blockquote>
<p>To see device events, select the <code>Engines</code> tab</p>
<blockquote>
<p><img src="img/engines-tab.png" alt="device event"></p>
<p><em>Figure 8b: Device events</em></p>
</blockquote>
<p>To see program events, select the <code>Programs</code> tab</p>
<blockquote>
<p><img src="img/programs-tab.png" alt="program event"></p>
<p><em>Figure 8c: Program events</em></p>
</blockquote>
<h5 id="23-application-instances">2.3 Application instances</h5>
<p>All launched applications can be viewed on the top right of the page. Users have the option to  <code>pause</code>, <code>resume</code>, or <code>kill</code> these launched applications by pressing the appropriate button underneath the specific instance.
Users can also launch a new application by selecting a prototype that has already been created (to create a new application prototype, take a look at the <a href="#applications">Applications</a> view).</p>
<blockquote>
<p><img src="img/application-controls.png" alt="application instances"></p>
<p><em>Figure 8d: Application instances</em></p>
</blockquote>
<h4 id="3-applications"><a id="applications"></a>3. Applications</h4>
<blockquote>
<p>The <code>Applications view</code> allows users to define and save their own <code>ThingsJS applications</code>, which can later be scheduled on available devices.</p>
</blockquote>
<h5 id="31-creating-a-new-application">3.1 Creating a New Application</h5>
<p>A form is provided on this page to create a new application. The steps for creating an application are as follows:</p>
<ol>
<li><p>Provide a name for your application</p>
</li>
<li><p>Browse through the filesystem and select components (code) to include in the application</p>
<blockquote>
<p><img src="img/available_components.png" alt="select components"></p>
<p><em>Figure 9: Selecting components for an application</em></p>
</blockquote>
</li>
<li><p>For each component, specify the number of instances of that component, and the component requirements (e.g. required memory)</p>
<blockquote>
<p><img src="img/component-requirements.png" alt="component requirements"></p>
<p><em>Figure 10: Component requirements</em></p>
</blockquote>
</li>
<li><p>Click <img src="img/save-application.png" alt="save application"> when you are finished</p>
</li>
</ol>
<h5 id="32-existing-applications">3.2 Existing Applications</h5>
<p>Users can view existing applications on a dropdown list to the right of the page under <code>Existing Applications</code>. 
Clicking on an application in the list will expand the panel with application details:</p>
<blockquote>
<p><img src="img/existing-apps.png" alt="Application details"></p>
<p><em>Figure 11: Details for an existing application</em></p>
</blockquote>
<h5 id="33-scheduling-an-existing-application">3.3 Scheduling an existing application</h5>
<blockquote>
<p><strong>Note</strong>: This task assumes that a running <code>Scheduler</code> exists on the network</p>
</blockquote>
<p>To schedule an application, select an existing application and expand on its details. There will be a <code>Schedule</code> button. Clicking on it will send a new request to the <code>Scheduler</code>. </p>
<p>If an application is successfully scheduled, a notification will appear on the screen:</p>
<blockquote>
<p><img src="img/app-success.png" alt="Application success"></p>
<p><em>Figure 12: Scheduling success</em></p>
</blockquote>
<p>If you do not need to view the application details before scheduling, users have the option of simply selecting an existing application by name and clicking the <code>run</code> button to send the application request (available on the bottom right panel). From this panel, users can also control launched applications.</p>
<blockquote>
<p><img src="img/launch-app.png" alt="Launched apps"></p>
<p><em>Figure 13: Controlling applications</em></p>
</blockquote>
<h4 id="4-files"><a id="files"></a>4. Files</h4>
<blockquote>
<p>The <code>Files view</code> provides an interface to the <code>ThingsJS filesystem</code>. </p>
</blockquote>
<h5 id="41-filesystem-navigation">4.1 Filesystem Navigation</h5>
<p>Users can navigate the filesystem using the <code>Filesystem Navigator</code>, which can be found to the right of the page. Files are indicated by a file icon, while directories are indicated by a folder icon.</p>
<blockquote>
<p><img src="img/fs-navigator.png" alt="Filesystem navigation"></p>
<p><em>Figure 12: Filesystem navigator</em></p>
</blockquote>
<p> Clicking on a file will bring the file up on the text editor to the left of the page. Clicking on a directory will bring the user inside the folder.</p>
<h6 id="411-current-directory">4.1.1 Current Directory</h6>
<p>Users can view the current directory at the top of the page. Any files or folders created will be made to the current directory.</p>
<blockquote>
<p><img src="img/cwd.png" alt="current directory"></p>
<p><em>Figure 13: The current directory</em></p>
</blockquote>
<h5 id="42-creating-a-new-directory">4.2 Creating a New Directory</h5>
<p>To create a new directory, type the directory name in the input field of the <code>Filesystem Navigator</code>. Then, click the green button beside the input field when complete.</p>
<blockquote>
<p><img src="img/new-folder.png" alt="creating a new folder"></p>
<p><em>Figure 14: Creating a new folder</em></p>
</blockquote>
<h5 id="43-creating-and-saving-files">4.3 Creating and Saving Files</h5>
<p>To create a new file, click the <code>Create New</code> button located to the top-right of the page. This will clear any existing content in the text-editor. Afterwards,</p>
<ol>
<li><p>Provide a name for your file</p>
</li>
<li><p>Fill the content of your file by writing inside the text editor</p>
<blockquote>
<p><img src="img/text-editor.png" alt="writing to text editor"></p>
<p><em>Figure 15: Writing a file</em></p>
</blockquote>
</li>
<li><p>When complete, click the <code>save</code> button located at the bottom of the page</p>
</li>
</ol>
<p>Your new file will be made visible in the <code>Filesystem navigator</code> once it has been successfully saved.</p>
<h5 id="44-deleting-files-and-folders">4.4 Deleting Files and Folders</h5>
<p>Delete files and folders by selecting them through the <code>Filesystem navigator</code>. When complete, click the <code>Delete selected</code> button. They will disappear from the navigator once successfully deleted.</p>
<blockquote>
<p><img src="img/delete-file.png" alt="deleting files"></p>
<p><em>Figure 16: Deleting files and folders</em></p>
</blockquote>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="../Migration.html" class="navigation navigation-prev " aria-label="Previous page: Live-Migration">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="../../api/" class="navigation navigation-next " aria-label="Next page: Developer API">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Using the Dashboard","level":"1.3.3","depth":2,"next":{"title":"Developer API","level":"1.4","depth":1,"path":"api/README.md","ref":"api/README.md","articles":[{"title":"Developer Documentation","level":"1.4.1","depth":2,"path":"api/Devdocs.md","ref":"api/Devdocs.md","articles":[]},{"title":"Running Unit Tests","level":"1.4.2","depth":2,"path":"api/Testing.md","ref":"api/Testing.md","articles":[]},{"title":"Pubsub","level":"1.4.3","depth":2,"path":"api/Pubsub.md","ref":"api/Pubsub.md","articles":[]},{"title":"Code","level":"1.4.4","depth":2,"path":"api/Code.md","ref":"api/Code.md","articles":[]},{"title":"CodeEngine","level":"1.4.5","depth":2,"path":"api/CodeEngine.md","ref":"api/CodeEngine.md","articles":[]},{"title":"Dispatcher","level":"1.4.6","depth":2,"path":"api/Dispatcher.md","ref":"api/Dispatcher.md","articles":[]},{"title":"Scheduler","level":"1.4.7","depth":2,"path":"api/Scheduler.md","ref":"api/Scheduler.md","articles":[]},{"title":"File system","level":"1.4.8","depth":2,"path":"api/GFS.md","ref":"api/GFS.md","articles":[]},{"title":"Web Dashboard","level":"1.4.9","depth":2,"path":"api/Dashboard.md","ref":"api/Dashboard.md","articles":[]}]},"previous":{"title":"Live-Migration","level":"1.3.2","depth":2,"path":"tutorials/Migration.md","ref":"tutorials/Migration.md","articles":[]},"dir":"ltr"},"config":{"plugins":["jsdoc"],"root":"./guide","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"jsdoc":{"options":"{}"},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"gitbook":"*"},"file":{"path":"tutorials/dashboard/Dashboard.md","mtime":"2018-10-15T23:34:02.479Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-24T23:23:12.622Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

